<template>
    <div class="View">
        <div class="tabs">
            <div class="btn activeBtn">
                <!-- <el-checkbox></el-checkbox> -->
                <el-button type="primary">抽出条件</el-button>
            </div>
        </div>

        <div class="row">
            <div class="label">
                利用状況
            </div>
            <div style="border: 1px solid #DCDFE6; width: 380px;height: 32px;display: flex;align-items: center;">
                <el-radio-group v-model="Data.c01">
                    <el-radio style="margin:0 15px 0 15px" v-for="(item, index) in listBox.useCaseLst" :key="index"
                        :label="item">{{ item }}</el-radio>
                    <!-- <el-radio :label=" 1" style="margin:0 15px 0 15px">111</el-radio>
                    <el-radio :label="1" style="margin:0 15px 0 15px">222</el-radio>
                    <el-radio :label="1" style="margin:0 15px 0 15px">333</el-radio>
                    <el-radio :label="2">222</el-radio> -->
                </el-radio-group>
            </div>
        </div>
        <div class="row">
            <div class="label">
                ライン№
            </div>
            <el-input class="ipt" v-model="Data.c02" @input="Data.c02 = $setMaxLength(Data.c02, 65)"></el-input>
        </div>
        <div class="row">
            <div class="label">
                C.L.番号
            </div>
            <el-select class="long-ipt" placeholder=" " v-model="Data.c03">
                <el-option v-for="item in listBox.clNoLst" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                ラインクラス
            </div>
            <el-select class="long-ipt" placeholder=" " v-model="Data.c04">
                <el-option v-for="item in listBox.lineclsLst" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                材質分類
            </div>
            <el-select class="long-ipt" placeholder=" " v-model="Data.c05">
                <el-option v-for="(item, index) in listBox.glossaryLst" :key="index" :label="item" :value="item">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                適用法規
            </div>
            <el-select class="long-ipt" placeholder=" " v-model="Data.c06">
                <el-option v-for="item in listBox.lawLst" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                設計圧力
            </div>
            <span style="margin: 0 20px 0 10px;">下限</span>
            <!-- <el-input class="short-ipt" v-model="Data.c07_FR"
                @input="Data.c07_FR = $setMyNum(Data.c07_FR, '5 - 3')"></el-input> -->
            <el-input class="short-ipt" v-model="Data.c07_FR" @input="changeDown('c07_FR')"></el-input>
            <span style=" margin: 0 20px 0 20px;">~</span>
            <span style="margin: 0 20px 0 0;">上限</span>
            <el-input class="short-ipt" v-model="Data.c07_TO" @input="changeDown('c07_TO')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                設計温度
            </div>
            <span style="margin: 0 20px 0 10px;">下限</span>
            <el-input class="short-ipt" v-model="Data.c08_FR" @input="changeDown('c08_FR')"></el-input>
            <span style="margin: 0 20px 0 20px;">~</span>
            <span style="margin: 0 20px 0 0;">上限</span>
            <el-input class="short-ipt" v-model="Data.c08_TO" @input="changeDown('c08_TO')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                運転圧力
            </div>
            <span style="margin: 0 20px 0 10px;">下限</span>
            <el-input class="short-ipt" v-model="Data.c09_FR" @input="changeDown('c09_FR')"></el-input>
            <span style="margin: 0 20px 0 20px;">~</span>
            <span style="margin: 0 20px 0 0;">上限</span>
            <el-input class="short-ipt" v-model="Data.c09_TO" @input="changeDown('c09_TO')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                運転温度
            </div>
            <span style="margin: 0 20px 0 10px;">下限</span>
            <el-input class="short-ipt" v-model="Data.c10_FR" @input="changeDown('c10_FR')"></el-input>
            <span style="margin: 0 20px 0 20px;">~</span>
            <span style="margin: 0 20px 0 0;">上限</span>
            <el-input class="short-ipt" v-model="Data.c10_TO" @input="changeDown('c10_TO')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                影響度
            </div>
            <el-select class="long-ipt" placeholder=" " v-model="Data.c09">
                <el-option v-for="item in listBox.impLst" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>

        <footer class="footer-view">
            <el-button @click="clearFn(false)">{{ $t("message.planView.btn.clear") }}</el-button>
            <el-button type="primary" @click="saveFn">{{ $t("message.planView.btn.get") }}</el-button>
            <el-button type="warning" @click="close">
                {{ $t("message.public.close") }}
            </el-button>
        </footer>
    </div>
</template>

<script>
import $ from "jquery";

import { GetLineIndexCondCombox, GetLineIndexCond, SetLineIndexCond, ClearLineIndexCond, GetClearLineIndexCondMsg } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
    name: "Dialog2",
    data() {
        return {
            listBox: [],
            negative: false,
            Data: {
                "c01": "",
                "c02": "",
                "c03": 1,
                "c04": 1,
                "c05": "",
                "c06": 1,
                "c07_FR": "",
                "c07_TO": "",
                "c08_FR": "",
                "c08_TO": "",
                "c09_FR": "",
                "c09_TO": "",
                "c10_FR": "",
                "c10_TO": "",
                "c09": 400
            },

            test: ''
        };
    },
    props: [],
    components: {},
    watch: {},
    methods: {
        changeDown(key) {
            if (this.Data[key].toString().startsWith('-')) {
                this.Data[key] = `-${this.$setMyNum(this.Data[key].replace(/-/, ''), '5 - 3')}`
            } else {
                this.Data[key] = `${this.$setMyNum(this.Data[key], '5 - 3')}`
            }
        },

        async clearFn(isConfirm) {

            if (!isConfirm) {
                this.Data = {
                    "c01": this.listBox.useCaseLst[0],
                    "c02": "",
                    "c03": this.listBox.clNoLst[0].key,
                    "c04": this.listBox.lineclsLst[0].key,
                    "c05": this.listBox.glossaryLst[0],
                    "c06": this.listBox.lawLst[0].key,
                    "c07_FR": "",
                    "c07_TO": "",
                    "c08_FR": "",
                    "c08_TO": "",
                    "c09_FR": "",
                    "c09_TO": "",
                    "c10_FR": "",
                    "c10_TO": "",
                    "c09": this.listBox.impLst[0].key,
                }
            }
            if (isConfirm) {
                let res = await GetClearLineIndexCondMsg({});
                if (res.data.code == 451) {
                    this.$confirm(res.data.msg, '', {
                        confirmButtonText: 'OK',
                        cancelButtonText: 'Cancel',
                        type: 'warning'
                    }).then(async () => {
                        let res = await SetLineIndexCond(this.getDefaultData());
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.Data = this.getDefaultData();
                            // this.close();
                            this.$emit('isDialog2ActiveFn2', !_.isEqual(this.getDefaultData(), this.getDefaultData()));
                            this.$emit('GetLineIndexListApi');
                            // this.$emit('showRetrievalBtn2', 'hidden')
                        } else {
                            this.$alert(res.data.msg, '', {
                                confirmButtonText: 'OK',
                                type: 'warning',
                            });

                        }
                    }).catch(() => {

                    });
                }
            }

        },
        // 抽出
        async saveFn() {
            console.log(this.Data);

            let dataJson = {
                Account: getLocalStorage('userName'),
                ...this.Data
            }
            let res = await SetLineIndexCond(dataJson);
            if (res.data.code != 0) {
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            this.$message.success(res.data.msg);
            this.$emit('isDialog2ActiveFn2', !_.isEqual(this.Data, this.getDefaultData()))
            this.$emit('GetLineIndexListApi');
            this.$emit('showRetrievalBtn2', 'hidden')
        },
        close() {
            this.$emit('showRetrievalBtn2', 'hidden')
        },
        getDefaultData() {
            return {
                "c01": this.listBox.useCaseLst[0],
                "c02": "",
                "c03": this.listBox.clNoLst[0].key,
                "c04": this.listBox.lineclsLst[0].key,
                "c05": this.listBox.glossaryLst[0],
                "c06": this.listBox.lawLst[0].key,
                "c07_FR": "",
                "c07_TO": "",
                "c08_FR": "",
                "c08_TO": "",
                "c09_FR": "",
                "c09_TO": "",
                "c10_FR": "",
                "c10_TO": "",
                "c09": this.listBox.impLst[0].key,
            }
        },
        // 获取用户的抽出条件
        async GetLineIndexCondApi() {
            const dataJson = {
                Account: getLocalStorage('userName'), // 登录账号
            };
            const res = await GetLineIndexCond(dataJson);
            if (res.data.code == 0) {
                this.Data = res.data.data;
                this.$emit('isDialog2ActiveFn2', !_.isEqual(this.Data, this.getDefaultData()))
            }
        },

        // 获取下拉框的集合
        async GetLineIndexCondComboxApi() {
            this.listBox = [];
            let dataJson = {
                PltCode: this.$store.state.pltCode || 9,//	是	int	装置Code
                Type: 1,
            }
            const res = await GetLineIndexCondCombox(dataJson);
            this.listBox = res.data.data;

            this.GetLineIndexCondApi();
        },

    },
    created() {

    },
    mounted() {
        this.GetLineIndexCondComboxApi();

    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    .row {
        width: 100%;
        display: flex;
        // justify-content: start;
        margin-top: 12px;
        align-items: center;
        padding-left: 16px;

        .label {
            // width: 145px;
            min-width: 145px;
            height: 32px;
            display: flex;
            align-items: center;
        }

        .ipt {
            width: 380px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;

            }
        }

        .right {

            ::v-deep .el-input__inner {
                text-align: right;

            }
        }

        .long-ipt {
            width: 380px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .short-ipt {
            width: 92px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .picker {
            // width: 175px;
            height: 32px;
            // margin: 0px 10px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__suffix {
                background: transparent;
            }

            ::v-deep .el-input__icon {
                line-height: 100%;
            }
        }

    }
}

.tabs {
    display: flex;
    padding: 16px 16px 0 16px;
    // height: 64px;
    border-bottom: 1px solid #8e8e883b;

    .btn {
        width: 50% !important;
        // border: 1px solid #C3C3C3;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 0;

        button {
            width: 100% !important;
            border-radius: 0;
        }

        // &:nth-child(2) {
        //     border-left: 0;
        //     border-right: 0;
        // }

        // span {
        //     margin-left: 8px;
        // }
    }

    .activeBtn {
        button {
            background-color: #106EBE;
            color: #FFF;
        }
    }
}

.content {
    width: 100%;
    height: calc(100% - 110px);
    // background-color: red;
    margin-top: 25px;
    overflow-y: scroll;
    padding-bottom: 50px;
}

.footer-view {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    background: #ffffff;

    button {
        min-width: 82px;
        height: 32px;

        // border: 1px solid #d9d9d9;
        margin-right: 12px;
        border-radius: 4px;
    }

    button:nth-child(2) {
        // background: #106ebe;
        // color: #fff;
        padding: 0 15px;
    }

    button:nth-child(3) {
        position: absolute;
        // background: #eb7421;
        // color: #fff;
        right: 0px;
    }
}
</style>
